<template>
	<view class="all">
		<text class="text"><text style="color: red;">*</text>备注</text>
		<input class="input" v-model="passwordBook.data.content" placeholder="请输入描述" maxlength="30"/>
		<text class="text"><text style="color: red;">*</text>账号</text>
		<input class="input" v-model="passwordBook.data.account" placeholder="请输入账号" maxlength="30"/>
		<text class="text"><text style="color: red;">*</text>密码</text>
		<input class="input" v-model="passwordBook.data.password" placeholder="请输入密码" maxlength="30"/>
		<text class="text">其他补充</text>
		<textarea class="input" v-model="passwordBook.data.other" placeholder="补充" maxlength="100"/>
		<button type="primary" :loading="adding" :disabled="adding" @click="add" 
		style="margin-top: 5vh;width: 60vw;margin-left: 20vw;">新增</button>
	</view>
</template>

<script>
	import { ref,reactive } from 'vue'
	
	export default {
		data() {
			var passwordBook=reactive({
				data:{
					content:'',
					account:'',
					password:'',
					other:''
				}
			})
			var adding=ref(false)
			return {
				passwordBook,
				adding
			}
		},
		methods: {
			add(){
				this.adding=true
				if(this.passwordBook.data.content==''||this.passwordBook.data.account==''
				||this.passwordBook.data.password==''){
					uni.showToast({
						title:'必填项不能为空',
						icon:'error'
					})
					this.adding=false
					return
				}
				var passwordBooks=uni.getStorageSync("passwordBooks")
				if(passwordBooks==null)//置空串
				    passwordBooks=''
				if(passwordBooks!=''){//反序列
				    passwordBooks=JSON.parse(passwordBooks)
					for(var i=0;i<passwordBooks.length;i++){
						if(passwordBooks[i].content==this.passwordBook.data.content){
							uni.showToast({
								title:'此备注已存在~',
								icon:'error'
							})
							this.adding=false
							return
						}
					}
				} else {
					passwordBooks=[]
				}
				passwordBooks.push(this.passwordBook.data)
				uni.setStorageSync("passwordBooks",JSON.stringify(passwordBooks))
				uni.showToast({
					title:'保存成功'
				})
				this.adding=false
			}
		}
	}
</script>

<style lang="scss" scoped>
.all{
	margin: 0;
	padding: 0;
	.text{
		margin-top: 1vh;
		margin-left: 2rem;
	}
	.input{
		border: 1px solid gray;
		width: 80vw;
		margin-top: 0.5vh;
		padding-left: 1rem;
		margin-left: 2rem;
	}
}
</style>
